import React, { Component } from 'react';
import { List, NavBar, TextareaItem, ImagePicker,Icon, PickerView, InputItem, WingBlank,  WhiteSpace, Flex, } from 'antd-mobile';
import { Link } from "react-router-dom";
import { MenuOutlined,MenuUnfoldOutlined, PictureOutlined,AlignLeftOutlined  } from '@ant-design/icons';

import AppPage from '../../container/AppPage'
import { Form, Radio,Upload,Modal} from 'antd'
// import { Radio } from 'antd';
const data = [{
    url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
    id: '2121',
}];
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
export default class AddPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            pwd: '',
            files: data,
            multiple: false,
            value: 1,
            fileList:[],
            previewVisible: false,
            previewImage: '',
            previewTitle: '',
        }
        this.register = this.register.bind(this)
        this.handleLogin = this.handleLogin.bind(this)
    }
    register() {
        this.props.history.push('/register');
    }
    handleLogin() {
        // this.props.login(this.props.state)

        this.props.history.push('/home/home');

    }
    handleChange = (editorState) => {
        this.setState({ editorState })
    }

    submitContent = async () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
       
        // const result = await saveEditorContent(htmlContent)
    }
 onChange = e => {
    console.log(`radio checked:${e.target.value}`);
}

    // ---------------------------------------------------------------------
    handleCancel = () => this.setState({ previewVisible: false });

    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }

        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        });
    };

    jiaoyan = () => {
      
    }
    render() {
        const controls = ['bold', 'italic', 'underline', 'text-color', 'link', 'separator','clear']

    
        const { previewVisible, previewImage, fileList, previewTitle } = this.state;
        const uploadButton = (
            <div>
                <PictureOutlined />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
                <div style={{ backgroundColor: '', }}>
                    <NavBar mode="dark"
                        leftContent={<Link to='barhome'><div style={{ color: '#fff' }}>取消</div></Link>}
                    rightContent={<span onClick={this.jiaoyan}>发布</span> }
                    ></NavBar>
                    <AppPage>
                    <List>
                        <InputItem
                            placeholder="title can be icon，image or text"
                        >
                        <AlignLeftOutlined/>
                        </InputItem>
                    </List>
                    <List>
                        <TextareaItem
                            initialValue={'计数功能,我的意见是...'}
                            rows={5}
                            count={300}
                        />
                    </List>
                    <List>
                        <List.Item>
                            <div ><MenuUnfoldOutlined style={{marginRight:'5px'}}/> 选择分类</div>
                         
                            <WhiteSpace size='lg'></WhiteSpace>
                            <Radio.Group onChange={this.onChange} defaultValue="a"
                                // style={{ display: 'flex', justifyContent: 'space-around' }}
                                buttonStyle='solid'
                            >
                                <Radio.Button value="a">学习</Radio.Button>
                                <Radio.Button value="b">生活</Radio.Button>
                            </Radio.Group>
                        </List.Item>
                          
                    </List>
                           
                    <WingBlank>
                        <Form onFinish={this.submitContent}>
                          
                            <Form.Item label='上传图片'>
                                <div className="clearfix">
                                    <Upload
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        listType="picture-card"
                                        fileList={fileList}
                                        onPreview={this.handlePreview}
                                        onChange={this.editHandleChange}
                                        label='ss'
                                        accept='image/*'
                                    >
                                        {fileList.length >= 3 ? null : uploadButton}
                                    </Upload>
                                    <Modal
                                        visible={previewVisible}
                                        title={previewTitle}
                                        footer={null}
                                        onCancel={this.handleCancel}
                                    >
                                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
                                    </Modal>
                                </div>
                                </Form.Item>
                        </Form>
                    </WingBlank>
                    </AppPage>
                    
                </div>
          
        );
    }
}

